<!--
 * @Description:
 * @Author: sunye
 * @Date: 2022-02-11 17:57:07
 * @LastEditTime: 2022-02-15 10:05:41
-->
<template>
  <div id="myChart6" style="width: 100%; height: 100%"></div>
</template>

<script>
import 'echarts-wordcloud'
export default {
  name: 'card',
  mounted () {
    this.drawLine()
  },
  methods: {
    drawLine () {
      let myChart = this.$echarts.init(document.getElementById('myChart6'))
      let option = {
        grid: {
          y: 20, y2: 20, x: 20, x2: 20
        },
        tooltip: {
          show: true
        },
        series: {
          type: 'wordCloud',
          // shape: 'circle',
          // maskImage: maskImage,
          left: 'center',
          top: 'center',
          width: '100%',
          height: '100%',
          right: null,
          bottom: null,
          sizeRange: [36, 60],
          rotationRange: [-45, 90],
          autoSize: {
            enable: true,
            minSize: 20
          },
          textPadding: 0,
          // rotationStep: 45,
          // gridSize: 8,
          drawOutOfBound: false,
          textStyle: {
            // normal: {
            color: function () {
              return (
                'rgb(' +
                [
                  Math.round(Math.random() * 250),
                  Math.round(Math.random() * 250),
                  Math.round(Math.random() * 250)
                ].join(',') +
                ')'
              )
            },
            // },
            emphasis: {
              shadowBlur: 10,
              shadowColor: '#333'
            }
          },
          data: [
            { 'name': 'CO2', 'value': 10927 }, { 'name': 'PM2.5', 'value': 20102 },
            { 'name': 'BOD', 'value': 10927 }, { 'name': 'COD', 'value': 9906 },
            { 'name': 'AQI', 'value': 13927 }, { 'name': 'PM10', 'value': 12322 },
            { 'name': '噪音', 'value': 10927 }, { 'name': '湿度', 'value': 32910 },
            { 'name': '总氮', 'value': 10927 }, { 'name': '总磷', 'value': 12902 },
            { 'name': '氰化物', 'value': 10927 }, { 'name': 'TSP', 'value': 10927 }
          ]

        }
      }
      // 绘制图表
      myChart.setOption(option)
    }
  }

}
</script>
